<style>
    .page-tab-content{height: 806px!important;}
    .layui-tab-content{height: 806px!important;}
    .dm-body ul li{width: 335px;height: 85px;margin:6px;border: 2px solid #B1D1D9;border-radius: 5px;position: relative;pointer-events: none;}
    .dm-main{width: 1410px;height:570px;float:left;border-top:1px solid #ccc;background: #FFFFFF}
    .dm-body{width: 345px;height:590px;float:left;margin-left:5px; overflow: hidden;}
    .dm-address{padding-left:20px;font-size: 14px;height:40px;line-height: 40px;border-left:2px solid #ccc;}
    .dm-top{padding-left:20px;height: 70px;line-height: 70px;background: #F0ECEC;position:relative}
    .lay-pic{width: 59px;height: 75px;padding-left: 5px;padding-top:5px;}
    .dm-height{height: 22px;padding-left: 10px;padding-top:5px;}
    .dm-heards-right{color:red;font-size:20px;margin-left:70px;}
    .dm-channeng{position:absolute;left: 18px;font-size: 10px;top: -9px;color: #B94545;font-weight:bold;z-index: 99;}
    .dm-baifenbi{position:absolute;font-size:10px;top: 13px;left:28px;color:#480000!important;font-weight:bold;z-index: 100}
    .dm-circle {z-index: 90;position: absolute;display:block;width: 60px; height: 60px;border-radius: 70%;background: none;border: 5px solid #B94545;margin-left:1px;}
    .shuiyin-item{position:absolute;pointer-events: none;display: inline-block;left:0;top:0;width: 335px;height: 85px;opacity: 0.3;    overflow: hidden;padding-right: 10px;
        border-style: none;border-color: unset;color: rgb(105, 16, 20);border-radius: 4px;font-size: 20px;text-align: right;font-weight: bold;font-style: italic;padding-top:25px;
    }
    .shuiyin-tiem-detail{}
    .dm-heard-top{width:93%;font-size: 16px;}
    .dm-heard-top ul li{float:left;width:315px;font-size: 17px;text-align: center;}
    .dm-baifenbi-main{float:left;width:60px;position: relative}
</style>
<!--显示主体--->
<div  class="dm-main">
</div>

<script type="text/html" id="economiesSummaryTemplate">
    {{# if(d.address_name !=''){ }}
    <div class="dm-address"><span style="display:inline-block;">展示地址：{{ d.address_name}}</span>
        <span style="display:inline-block;float:right;padding-right: 150px;">
                <a href="/admin.php/mp/localBoard/addSmallLabel?address_id={{ d.address_id}}" class="layui-btn layui-btn-primary layui-btn-sm layui-icon layui-icon-set hisi-iframe" hisi-data="{width: '30%', height:'90%'}" style="float:left;margin-top:5px;" title="标签自定义">标签自定义</a>
        </span>
    </div>
    {{# } }}

    <div class="dm-top">
        <div class="dm-heard-top" >
            <ul>
            {{#  layui.each(d.data, function(index, item){ }}
                {{# if(item.list.length >0 ){ }}
            <li >{{ item.label_name }}【{{ item.quantity }}件/{{ item.count}}单】</li>
                 {{# }}}
            {{#  }); }}
            </ul>
        </div>
        <div  class="dm-baifenbi-main">
            <span class="dm-circle"></span>
            <span class="dm-channeng" style="">总产能</span>
            <span class="dm-baifenbi">{{ d.TotalCapacity}}%</span>
        </div>
    </div>
    <div style="clear:both;"></div>

    <!-- 内容-->
    {{#  layui.each(d.data, function(index, item){ }}
         {{# if(item.list.length >=1 ){ }}
    <div class="dm-body dm-one-column">
        <ul class="autoScroll_{{index}}">
            {{#  layui.each(item.list, function(index2, item2){ }}
            <li>
                <div style="float:left;"><img src="{{item2.ori_pic}}" class="lay-pic"></div>
                <div style="float:left;">
                    <div class="dm-height"><span>{{item2.client_ordernum}}</span>&nbsp; <span style="color: #FF8E00;">
                       {{# if(item.order_type_up !=item2.type_show){ }}
                          {{ item2.type }}
                       {{# } }}

                    </span>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#BC751B">{{ item2.fei_show }}</span></div>
                    <div class="dm-height"></div>
                    <div class="dm-height">{{item2.quantity}}件/ {{item2.shipment_time}}   <span class="red"></span>
                         <!--背景是否显示-->
                        {{# if(item.order_type_up==item2.type_show ||  item.break_code_up==item2.break_code_show){ }}
                          <span class="shuiyin-item shuiyin-tiem-detail">
                          {{# }else{ }}
                          <span class="shuiyin-item">
                         {{# } }}
                              <!--显示单类，用不同颜色表示-->
                            {{# if(item.order_type_up==item2.type_show){ }}
                                 {{# if(item2.type_show=='new'){ }}
                                  <span style="color:#109007!important;">{{ item2.type }}</span>
                                  {{# }else if(item2.type_show=='emergent'){ }}
                                  <span style="color:#791e1e!important;">{{ item2.type }}</span>
                                 {{# }else if(item2.type_show=='my_return_first'){ }}
                                  <span style="color:#735bbf!important;">{{ item2.type }}</span>
                                 {{# }else if(item2.type_show=='my_first'){ }}
                                  <span style="color:#41b7bd!important;">{{ item2.type }}</span>
                                  {{# }else{ }}
                                  <span style="color:#005bc5!important;">{{ item2.type }}</span>
                                  {{# } }}

                                  {{# if(item.break_code_up==item2.break_code_show){ }}
                                   -
                                  {{# } }}

                                  {{# if(item.break_code_up==item2.break_code_show){ }}
                                   -
                                  {{# } }}

                            {{# } }}
                              <!--显示断码，其中断码和将断码用不同颜色区分-->
                            {{# if(item.break_code_up==item2.break_code_show){ }}
                                {{# if(item2.break_code_show==3){ }}
                                <span style="color:red!important;"> {{ item2.break_code_status }}</span>
                                 {{#  }else if(item2.break_code_show==2){ }}
                                <span style="color:#e04887!important;"> {{ item2.break_code_status }}</span>
                                  {{# }else{ }}
                                          {{ item2.break_code_status }}
                                 {{# } }}

                            {{# } }}
                        </span>
                    </div>
                </div>
            </li>
            {{#  }); }}
        </ul>
    </div>
         {{# } }}
    {{#  }); }}
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
{include file="system@block/layui" /}
<script src="__PUBLIC_JS__/jquery.2.1.4.min.js?v={:config('hisiphp.version')}"></script>
<script src="__PUBLIC_JS__/xm-select/dist/xm-select.js?v={:config('hisiphp.version')}"></script>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7/jquery.min.js"></script>

<script>
    layui.use(['form','laytpl'], function () {
        var   form = layui.form, laytpl = layui.laytpl, layer = layui.layer;
        var opTable=function (options=[]){
            var myMsg =layer.load(1, {shade: [0.1,'#fff']});
            var address_id=getQueryString('address_id');
            var page_name=window.location.pathname;
            if(address_id ==null){
              address_id='';
            }
            var parm=[];
            if(options !=''){
                parm= options.where;
                parm={'client_ordernum':parm.client_ordernum,'sku':parm.sku,'address_id':parm.address_id};
            }
            setTimeout(function() {
                layer.close(myMsg);
            }, 2000);
            $.ajax({
                type: "POST",
                url: "{:url('/mp/localBoard/index')}?address_id="+address_id,
                data: parm,
                dataType:"json",
                success: function(res){
                    layer.close(myMsg);
                    if(res.code==1 || res.code==0){
                        //看板详情 -不显示展示地址
                        if(page_name=='/admin.php/mp/localBoard/boardShow.html'){
                            var  address_name_ok='';
                        }else{
                            var address_name_ok= res.address_name;
                        }
                        if(res.address_id==null){
                            var address_id_ok=address_id;
                        }else{
                            var address_id_ok= res.address_id;
                        }
                        //显示html
                        var content = laytpl($('#economiesSummaryTemplate').html()).render({data:res.data,TotalCapacity:res.TotalCapacity,address_name:address_name_ok,address_id:res.address_id});
                        $('.dm-main').html(content);
                        //设置滚动速度
                        for(var i=0;i<res.data.length;i++){
                                if (res.data[i].list.length > 6 && typeof (res.data[i]) != 'undefined' && res.data[i] != null) {
                                    $(".autoScroll_"+i).scrollQ({'speed_setting': (res.data[i].speed_seting) * 1000});
                                }
                        }

                    }else{
                        layer.msg(res.msg, {icon: 2,anim: 6});
                    }
                }
            });

        }
        opTable();

        /**
         * layui非静态table搜索渲染
         * @attr data-table table容器ID
         * @attr hisi-data table基础参数
         * @attr action 搜索请求地址
         */
        $(document).on('submit', '#hisi-table-search,#hisi-table-search-optable', function() {
            var that = $(this),
                arr = that.serializeArray(),
                where = new Array(),
                dataTable = that.attr('data-table') ? that.attr('data-table') : 'dataTable',
                options = new Function('return '+ that.attr('hisi-data'))() || {page: {curr:1}};

            for(var i in arr) {
                where[arr[i].name] = arr[i].value;
            }

            options.url = that.attr('action');
            options.where = where;
            opTable(options);

            return false;
        });

    });
    function getQueryString(name) {
        var url2= document.location.href;
        const url_string = url2; // window.location.href
        const url = new URL(url_string);

        return url.searchParams.get(name);
    }


</script>

<script type="text/javascript" src="scrollQ.js"></script>
<script >
    /**
     * jQuery scrollQ plugin li上下滚动插件
     * @name jquery-scrollQ.js
     * line 显示li行数
     * scrollNum 每次滚动li行数
     * scrollTime 滚动速度 单位毫秒
     *
     */
    (function($){
        var status = false;
        $.fn.scrollQ = function(options){
            var defaults = {
                line:6,
                scrollNum:6,
                scrollTime:options.speed_setting
            }
            var options=jQuery.extend(defaults,options);
            var _self = this;
            return jQuery(this).each(function(){
                $("li",this).each(function(){
                    $(this).css("display","none");
                })
                $("li:lt("+options.line+")",this).each(function(){
                    $(this).css("display","block");
                })
                function scroll() {
                    for(i=0;i<options.scrollNum;i++) {
                        var start=$("li:first",_self);
                        start.fadeOut(100);
                        start.css("display","none");
                        start.appendTo(_self);
                        $("li:eq("+(options.line-1)+")",_self).each(function(){
                            $(this).fadeIn(500);
                            $(this).css("display","block");
                        })
                    }
                }
                var timer;
                timer = setInterval(scroll,options.scrollTime);
                _self.bind("mouseover",function(){
                    clearInterval(timer);
                });
                _self.bind("mouseout",function(){
                    timer = setInterval(scroll,options.scrollTime);
                });

            });
        }
    })(jQuery);
</script>
